@charset "utf-8";
@import "color";
@import "model";
$themeColor:$cyan;
body {
    min-width: 800px;
    margin: 0 auto;
    font-size: 13px;
    background-color: #e8e8e8;
    font-family: "Segoe UI", "Lucida Grande", "Helvetica", "Arial", "Microsoft YaHei", "FreeSans", "Arimo", "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "sans-serif";
}
button {
    border: 0;
    outline: none;
}
.alertmsg {
    font-size: 15px;
    margin: 10px 20px;
    padding: 15px 10px;
    background-color: #dff0d8;
    color: #468847;
    box-shadow: 0 1px 5px #ddd;
    .close {
        float: right;
        padding: 0;
        box-shadow: 0 0 0;
        background: transparent;
        cursor: pointer;
        -webkit-appearance: none;
        color: $silver;
        &:hover {
            color: $orange;
        }
    }
}

.top {
    background-color: #fff;
    color: #aaa;
    position: fixed;
    z-index: 100;
    width: 100%;
    top: 0;
    left: 0;
    box-shadow: 0 1px 1px rgba(black, 0.15);
    .top1 {
        vertical-align: top;
        height: 46px;
        padding: 0 20px;
        border-bottom: 1px solid #e6e6e6;
        line-height: 46px;
        overflow: hidden;
        @include comic_1(0.3, 0);
        &.focus {
            height: 0;
        }
        .left {
            width: 50%;
            display: inline-block;
            font-size: 18px;
        }
        .right {
            vertical-align: top;
            width: 50%;
            display: inline-block;
            text-align: right;
        }
        [class^="icon-"], [class*=" icon-"] {
            display: inline-block;
            position: relative;
            cursor: pointer;
            height: 46px;
            &:hover {
                background-color: #f5f5f5;
            }
            &:before {
                font-size: 23px;
                padding: 0 7px;
                margin: 0 5px;
                font-weight: lighter;
            }
            .flag {
                font-size: 13px;
                position: absolute;
                background-color: $red;
                color: $white;
                display: inline-block;
                height: 20px;
                width: 20px;
                text-align: center;
                line-height: 21px;
                z-index: 2;
                top: 3px;
                left: 3px;
                border-radius: 50%;
            }
        }
        .user {
            margin-left: 12px;
            vertical-align: top;
            display: inline-block;
            height: 46px;
            &:hover {
                background-color: #f5f5f5;
            }
            img {
                width: 40px;
                height: 40px;
                margin: 3px;
                border-radius: 50%;
                cursor: pointer;
            }
        }
    }
    .top2 {
        padding: 0 20px;
        text-align: center;
        [class^="icon-"], [class*=" icon-"] {
            &:before {
                font-size: 28px;
                padding: 5px 7px;
                font-weight: lighter;
            }
        }
        .item {
            display: inline-block;
            vertical-align: top;
            padding: 10px 0;
            width: 70px;
            margin: 0 10px;
            cursor: pointer;
            text-decoration: none;
            @include comic_1(0.5, 0);
            &.focus {
                color: #007aff;
            }
            &:hover {
                color: $orange;
                background-color: #f5f5f5;
            }
        }
    }
}
.topblock {
    height: 130px;
    width: 100%;
}